{extend name="public/common"}

{block name="style"}
<title>拟办意见分发</title>
<link rel="stylesheet" href="/home/css/documents/distribute.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="box">
        <p>办理人员：</p>
        <div @click="togglePeople" :class="nameArray.length == 0?'select-box special':'select-box'"><p>{{nameArray.length > 0 ? nameArray.toString() : '请选择办理人员'}}</p><i class="fa fa-angle-down"></i></div>
        <mt-popup  position="bottom"  v-model="popupVisible" class="mint-popup">
<!--            <div class="picker-toolbar">-->
<!--                <span class="mint-datetime-action mint-datetime-cancel" @click="togglePeople">取消</span>-->
<!--                <span class="mint-datetime-action mint-datetime-confirm" @click="peopleConfirm">确定</span>-->
<!--            </div>-->
            <div class="people-list">
                <ul>
                    <li v-for="item in people" @click="choosePeople(item)">
                        <p>{{item.username}}</p>
                        <i class="fa fa-check" v-if="nameArray.indexOf(item.username) > -1"></i>
                    </li>
                </ul>
            </div>
        </mt-popup>
    </div>
    <div class="box">
        <p>备注：</p>
        <div class="textarea">
            <textarea type="text" v-model="remark" placeholder="请输入备注" oninput="if(value.length>200)value=value.slice(0,200);"></textarea>
            <span>{{remark.length}} / 200字</span>
        </div>
    </div>
    <div class="foot">
        <div class="send" @click="distribute">分发</div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    console.log({$user})
    var vw = new Vue({
        el: "#app",
        data: {
            popupVisible: false,
            nameArray: [],
            peopleArray: [],
            remark: '',
            people: {$user},
            id:0
        },
        created() {
            var arrays = window.location.href.split('/'),
                keys = arrays[arrays.length-1].split('.');
            this.id = keys[0];
            this.pushHistory();
        },
        methods: {
            pushHistory() {
                window.addEventListener("popstate", function (e) {
                    self.location.reload();
                }, false);
                var state = {
                    title: "",
                    url: "#"
                };
                window.history.replaceState(state, "", "#");
            },
            togglePeople() {
                this.popupVisible = !this.popupVisible;
            },
            choosePeople(item) {
                var index =this.nameArray.indexOf(item.username)
                if(index > -1) {
                    this.nameArray.splice(index,1);
                    this.peopleArray.splice(index,1);
                } else {
                    var obj = {
                        'permission': item.tagid,
                        'userid': item.userid,
                    };
                    this.nameArray.push(item.username);
                    this.peopleArray.push(obj);
                }
            },
            peopleConfirm() {
                this.popupVisible = !this.popupVisible;
            },
            distribute() {
                var _this = this;
                _this.$messagebox.confirm('是否确认分发','上级来文').then(function () {
                    if (_this.nameArray.length == 0) {
                        _this.$toast({
                            message: "请选择办理人员",
                            duration: 1500
                        });
                        return false;
                    }
                    _this.$indicator.open({
                        text: '正在分发中',
                        spinnerType: 'triple-bounce'
                    });
                    _this.$http.post("{:Url('Documents/opinion_distribute')}", {
                        'user': _this.peopleArray,
                        'remarks': _this.remark,
                        'communication_id': _this.id
                    }, {emulateJSON: true}).then(function (res) {
                        console.log(res.data)
                        var data = res.data;
                        if (data.code == 1) {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "分发成功，返回中",
                                iconClass: 'icon',
                                duration: 1500
                            });
                            setTimeout(function () {
                                window.location.href = "/home/documents/opinion_list.html";
                            }, 1000);
                        } else {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "分发失败，请重试！",
                                duration: 1500
                            });
                        }
                    }, function (res) {
                        _this.$indicator.close();
                        _this.$toast({
                            message: "分发失败，请重试！",
                            duration: 1500
                        });
                    });
                });
            }
        }
    })
</script>
{/block}
